// 入口文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Vuex from 'vuex'
import router from './router.js'
// 安装路由
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(Vuex);

// 导入格式化时间的插件
import moment from 'moment'
// 定义全局的过滤器
Vue.filter('dateFormate', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    return moment(dataStr).format(pattern);
});


import App from './App.vue'
// 导入 MUI 样式
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'


// 导入 MintUI 样式
import 'mint-ui/lib/style.css'
// 按需导入 MintUI
/*import { Header,Swipe, SwipeItem, Button, Lazyload } from 'mint-ui';
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);*/
// 全局导入
import MintUI from 'mint-ui'
Vue.use(MintUI)
// 图片预览插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


// 从本地存储中获取
var car = localStorage.getItem('car') || '[]';
car = JSON.parse(car);

// 使用 Vuex 设置仓库
const store = new Vuex.Store({
    state: {
        // { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false }
        car: car
    },
    mutations: {
        // 这里的方法只可以传两个参数，第一个参数必须是 state，第二个是自定义的，可以是字符串、对象等等。
        addToCar(state, goodsinfo) {
            var flag = false;
            // 先判断存不存在数组中，存在就 count 相加
            state.car.some( item => {
               if (item.id == goodsinfo.id) {
                   item.count += parseInt(goodsinfo.count);
                   flag = true;
                   return true;
               }
            });
            if (!flag) {
                // 保存到数组
                state.car.push(goodsinfo);
            }
            // 存到 localStorage
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        updateCarCount(state, goodsinfo) {
            // 更新购物车对应的商品数量
            state.car.some( item => {
                if (item.id == goodsinfo.id) {
                    item.count = parseInt(goodsinfo.count);
                    return true;
                }
            });
            // 存到 localStorage
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        removeFromCar(state, id) {
            // 从购物车中删除商品
            state.car.some( (item, index) => {
               if (item.id == id) {
                   state.car.splice(index, 1);
                   return true;
               }
            });
            // 存到 localStorage
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        updateGoodsState(state, goodsinfo) {
            // 更新商品信息
            state.car.some( item => {
                if (item.id == goodsinfo.id) {
                    item.selected = goodsinfo.selected;
                    return true;
                }
            });
            // 存到 localStorage
            localStorage.setItem('car', JSON.stringify(state.car));
        }
    },
    getters: {
        // 只负责读取数据，如果 state 中的数据发生改变，也会触发 getters 函数里的方法
        // 计算所有数量
        getAllCount(state) {
            var sum = 0;
            state.car.forEach( item => {
               sum += item.count;
            });
            return sum;
        },
        // 获取商品 id 对应的 数量
        getShopCarCount(state) {
            var obj = {};
            state.car.forEach( item => obj[item.id] = item.count);
            return obj;
        },
        getGoodsState(state) {
            // 获取商品状态
            var obj = {};
            state.car.forEach( item => {
                obj[item.id] = item.selected;
            });
            return obj;
        },
        getCountAndAmount(state) {
            // 获取勾选中的商品数量
            var obj = {
                count: 0,
                amount: 0
            };
            state.car.forEach( item => {
                obj.count += item.count;
                obj.amount += item.count * item.price;
            });
            return obj;
        }

    }
});


// 要在 Vue.use(VueRouter); 后使用
Vue.http.options.root = '../../data';
// 设置表单提交为：application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

var vm = new Vue({
    el: '#app',
    data: {

    },
    methods: {

    },
    render: c => c(App),
    router,
    store
});
